<template>
	<view class="page_box">
		<view class="head_box">
			<!-- tab -->
			<view class="order-nav u-flex">
				<view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id"
					@tap="onNav(nav.type)">
					<view class="item-title" :class="{ 'line-active': orderType === nav.type }">{{ nav.title }}</view>
					
				</view>
			</view>
		</view>

		<view class="content_box" v-if="orderType!='afterSale'">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<!-- 订单列表 -->
				<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id"
					@tap.stop="jump('/pages/order/detail', { id: order.id })">
					<view class="order-head u-flex u-row-between">
						<text class="no">订单号：{{ order.order_sn }}</text>
						<text class="state">{{ order.status_name }}</text>
					</view>
					<view class="goods-order" v-for="goods in order.item" :key="goods.id" :style="order.btns.length == 0 ?'margin-bottom: 0;border-bottom:0':''">
						<view class="order-content" style="padding-bottom: 30rpx;">
							<view class="order-content-box">
								<image :src="goods.goods_image" mode=""></image>
								<view class="order-content-box-r">
									<view class="order-content-text">
										<view class="order-title u-line-1">{{ goods.goods_title }}</view>
										<view class="order-price">¥{{ goods.goods_price }}</view>
									</view>
									<view class="order-des" v-if="goods.goods_sku_text">
										{{ goods.goods_sku_text ? goods.goods_sku_text : '' }}
									</view>
									<view class="order-num">X{{ goods.goods_num }}</view>
								</view>
							</view>
							<view class="order-zongjia">
								<!-- <text class="all-unit">￥</text>
								{{ order.dispatch_amount }} ， -->
								{{ order.status <= 0 ? '需付款' : '实付款' }}：
								<view class="all-money font-OPPOSANS"><text style="font-size: 24rpx;">￥</text>{{ order.total_fee }}</view>
							</view>
						</view>
					</view>
					<view class="order-bottom" v-if="order.btns.length">
						<!-- 按钮 -->
						<view class="btn-box u-flex" v-if="order.btns.length">
							<block v-for="orderBtn in order.btns" :key="orderBtn">
								<button v-if="orderBtn === 'cancel'" @tap.stop="isCancel(order.id, orderIndex)"
									class="u-reset-button obtn1">取消订单</button>
								<button v-if="orderBtn === 'pay'" @tap.stop="onPay(order.id)"
									class="u-reset-button obtn2">立即支付</button>
								<button v-if="orderBtn === 'groupon'"
									@tap.stop="jump('/pages/activity/groupon/detail', { id: order.ext_arr.groupon_id })"
									class="u-reset-button obtn2">
									拼团详情
								</button>
								<button v-if="orderBtn === 'delete'" @tap.stop="isDelete(order.id, orderIndex)"
									class="u-reset-button obtn1">删除订单</button>
									<!-- <button v-if="orderBtn === 'express'" @tap.stop="onExpress(order.id, orderIndex)"
										class="u-reset-button obtn1">提醒发货</button> -->
								<button v-if="orderBtn === 'express'" @tap.stop="onExpress(order.id, orderIndex)"
									class="u-reset-button obtn1">查看物流</button>
								
							</block>
						</view>
					</view>
				</view>

				<!-- 空白页 -->
				<shopro-empty v-if="isEmpty" :image="IMG_URL + '/imgs/empty/empty_groupon.png'"
					tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
		<view class="content_box" v-else>
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id" @tap="jump('/pages/order/after-sale/detail', { aftersaleId: order.id })">
					<view class="order-head u-flex u-row-between">
						<text class="no">订单号：{{ order.aftersale_sn }}</text>
						<view class="order-status u-flex">
							<text class="status-text">{{ order.aftersale_status_text }}</text>
						</view>
					</view>
					<view class="order-content">
						<shopro-mini-card :title="order.goods_title" :image="order.goods_image">
							<template #describe>
								<view class="order-sku u-ellipsis-1">
									<text class="order-num">数量:{{ order.goods_num || 0 }};</text>
									{{ order.goods_sku_text ? order.goods_sku_text : '' }}
								</view>
							</template>
							<template #cardBottom>
								<view class="card-price-box u-flex">
									<text class="order-price font-OPPOSANS">￥{{ order.goods_price || 0 }}</text>
									<button class="u-reset-button status-btn">{{ order.type_text }}</button>
								</view>
							</template>
						</shopro-mini-card>
					</view>
					<view class="order-bottom">
						<view class="serve-status u-flex u-row-between" @tap.stop="jump('/pages/order/after-sale/log', { aftersaleId: order.id })">
							<view class="u-flex">
								<view class="serve-title">{{ order.aftersale_status_text }}</view>
								<view class="serve-content">{{ order.aftersale_status_desc }}</view>
							</view>
							<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
						</view>
						<view class="btn-box u-flex" v-for="orderBtn in order.btns" :key="orderBtn">
							<button v-if="orderBtn === 'cancel'" @tap.stop="isAftersCancel(order.id, orderIndex)" class="u-reset-button obtn">取消</button>
							<button v-if="orderBtn === 'delete'" style="background: #FFFFFF; border-radius: 25rpx;  border: 1rpx solid #999999;" 
							@tap.stop="isAftersDelete(order.id, orderIndex)" class="u-reset-button obtn">
								删除订单
							</button>
						</view>
					</view>
				</view>
				<!-- 缺省页 -->
				<shopro-empty v-if="isEmpty" :image="IMG_URL + '/imgs/empty/empty_groupon.png'" tipText="暂无相关记录~"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-if="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view>
		</view>
		<!-- 取消订单 -->
		<u-modal v-model="clearOrder" title="取消订单" confirm-color="#FF9A33" border-radius="10" :show-cancel-button="true"
			:confirm-style="confirmStyle"
			@confirm="onCancel"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}"
		> 
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text>取消后订单将彻底删除</text>
					<text>确定要取消订单吗？</text>
				</view>
			</view>
		</u-modal>
		<!-- 取消订单 -->
		<u-modal v-model="clearAftersOrder" title="取消售后" confirm-color="#FF9A33" border-radius="10" :show-cancel-button="true"
			:confirm-style="confirmStyle"
			@confirm="onAftersCancel"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}"
		> 
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text>确定要取消售后吗？</text>
				</view>
			</view>
		</u-modal>
		<u-modal v-model="delOrder" title="删除订单" confirm-color="#FF9A33" border-radius="10" :show-cancel-button="true"
		:confirm-style="confirmStyle"
		@confirm="onDelete"
		:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}"
		> 
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text>删除后订单将彻底删除</text>
					<text>确定要删除订单吗？</text>
				</view>
			</view>
		</u-modal>
		<!-- 售后订单删除 -->
		<u-modal v-model="delAftersOrder" title="删除订单" confirm-color="#FF9A33" border-radius="10" :show-cancel-button="true"
		:confirm-style="confirmStyle"
		@confirm="onAftersDelete"
		:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}"
		> 
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text>删除后订单将彻底删除</text>
					<text>确定要删除订单吗？</text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isEmpty: false,
				clearOrder:false,
				delOrder:false,
				delAftersOrder:false,
				clearAftersOrder:false,
				confirmStyle:{
					'borderLeft': '1px solid #EEEEEE'
				},
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				orderType: 'all',
				orderList: [],
				
				cancelId:0,
				orderIndex:0,
				orderState: [{
						id: 0,
						title: '全部',
						type: 'all'
					},
					{
						id: 1,
						title: '待付款',
						type: 'nopay'
					},
					{
						id: 2,
						title: '待发货',
						type: 'nosend'
					},
					{
						id: 3,
						title: '待收货',
						type: 'noget'
					},
					// {		
					// 	id: 4,
					// 	title: '待评价',
					// 	type: 'nocomment'
					// },
					{
						id: 5,
						title: '售后',
						type: 'afterSale'
					}
				]
			};
		},
		computed: {
			IMG_URL(){
				return this.$IMG_URL
			}
		},
		onShow() {
			this.orderList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			if (this.$Route.query.type != 'afterSale') {
				this.orderType = this.$Route.query.type;
				this.getOrderList();
			}else{
				this.orderType = this.$Route.query.type;
				this.getAftersaleList();
			}
		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			// tab切换
			onNav(id) {
				if (this.orderType !== id) {
					this.orderType = id;
					this.orderList = [];
					this.currentPage = 1;
					this.lastPage = 1;
					if(id == 'afterSale'){
						this.getAftersaleList();
					}else{
					  this.getOrderList();
					}
					
				}
			},
			// 售后列表
			getAftersaleList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('order.aftersaleList', {
					type: 'all',
					page: that.currentPage
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.data];
						that.isEmpty = !that.orderList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
			// 订单列表
			getOrderList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('order.index', {
					type: that.orderType,
					page: that.currentPage
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.data];
						that.isEmpty = !that.orderList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},

			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getOrderList();
				}
			},
			isDelete(id, orderIndex){
				this.cancelId = id
				this.orderIndex = orderIndex
				this.delOrder = true
			},
			isAftersDelete(id, orderIndex){
				this.cancelId = id
				this.orderIndex = orderIndex
				this.delAftersOrder = true
			},
			onAftersDelete(aftersaleId, orderIndex){
				let that = this
				that.$http(
					'order.deleteAftersaleOrder',
					{
						id: this.cancelId 
					},
					'删除中...'
				).then(res => {
					if (res.code === 1) {
						this.$u.toast(res.msg);
						this.orderList.splice(that.orderIndex, 1);
					}
				});
			},
			// 删除订单
			onDelete(orderId, orderIndex) {
				let that = this;
				that.$http('order.deleteOrder', {
						id: that.cancelId
					},
					'删除中...'
				).then(res => {
					if (res.code === 1) {
						that.$u.toast(res.msg);
						that.orderList.splice(that.orderIndex, 1);
					}
				});
				// uni.showModal({
				// 	title: '删除订单',
				// 	content: '确定要删除这个订单么？',
				// 	cancelText: '取消',
				// 	confirmText: '删除',
				// 	success: res => {
				// 		if (res.confirm) {
							
				// 		}
				// 	}
				// });
			},
			isCancel(id, orderIndex){
				this.cancelId = id
				this.orderIndex = orderIndex
				this.clearOrder = true
			},
			isAftersCancel(id, orderIndex){
				this.cancelId = id
				this.orderIndex = orderIndex
				this.clearAftersOrder = true
			},
			// 取消订单
			onCancel(id, orderIndex) {
				let that = this;
				that.$http('order.cancel', {
						id: that.cancelId
					},
					'取消中...'
				).then(res => {
					if (res.code === 1) {
						that.$u.toast(res.msg);
						this.orderList.splice(that.orderIndex, 1);
					}
				});
			},
			//取消
			onAftersCancel(aftersaleId, orderIndex) {
				let that = this;
				that.$http(
					'order.cancelAftersaleOrder',
					{
						id: that.cancelId
					},
					'取消中...'
				).then(res => {
					if (res.code === 1) {
						this.$u.toast(res.msg);
						// this.orderList.splice(that.orderIndex , 1);
						that.orderList = [];
						that.currentPage = 1;
						that.lastPage = 1;
						that.getAftersaleList();
					}
				});
			},
			// 立即购买
			onPay(id) {
				uni.navigateTo({
					url: `/pages/order/payment/method?orderId=${id}&orderType=goods`
				});
			},

			// 查看物流
			onExpress(orderId) {
				let that = this;
				that.$http('order.expressList', {
					order_id: orderId
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length == 1) {
							this.jump('/pages/order/express/express-detail', { orderId: orderId, expressId: res
									.data[0].id });
						} else if (res.data.length > 1) {
							this.jump('/pages/order/express/express-list', { orderId: orderId });
						} else {
							that.$u.toast('暂无包裹~');
						}
					}
				});
			},
			
		}
	};
</script>

<style lang="scss">
	.order-nav {
		background: #fff;
		height: 80rpx;
		border-top: 5rpx solid #F6F6F6;
		.nav-item {
			flex: 1;

			.item-title {
				font-size: 30rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 76rpx;
			}

			.nav-line {
				width: 100rpx;
				height: 4rpx;
				background: #fff;
			}

			.line-active {
				color: #FF9A33;
				font-weight: bold;
			}
		}
	}

	.order-list {
		background: #fff;
		margin: 20rpx 20rpx;
		border-radius: 20rpx !important;
		.order-bottom {
			padding-bottom: 20rpx;

			.btn-box {
				justify-content: flex-end;
			}

			.all-msg {
				font-size: 24rpx;
				color: #999;
				justify-content: flex-end;
				margin-bottom: 10rpx;
				padding: 0 30rpx;

				.all-unit {
					font-size: 20rpx;
				}

				.all-money {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;

					&::before {
						content: '￥';
						font-size: 20rpx;
					}
				}
			}

			.obtn1 {
				width: 130rpx;
				line-height: 50rpx;
				background: #FFFFFF;
				border-radius: 25rpx;
				border: 1rpx solid #999999;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				margin: 0;
				margin-right: 20rpx;
				padding: 0;
				
			}

			.obtn2 {
				width: 130rpx;
				line-height: 50rpx;
				background: #FFFFFF;	
							border: 1rpx solid #FF9A33;
				border-radius: 25rpx;
				margin: 0;
				margin-right: 20rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FF9A33;
				padding: 0;
			}

			.obtn3 {
				background: #ffeeee;
				color: #e50808;
				width: 160rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				padding: 0;
			}
		}

		.order-head {
			padding: 0 25rpx;
			height: 77rpx;
			border-bottom: 1rpx solid #dfdfdf;

			.no {
				font-size: 26rpx;
				color: #999;
			}

			.state {
				font-size: 24rpx;
				color: #FF9A33;
			}
		}

		.goods-order {
			border-bottom: 1px solid rgba(223, 223, 223, 0.5);
			// padding: 20rpx 20rpx 0;
			margin-bottom: 20rpx;

			.order-content {
				padding-bottom: 20rpx;

				.order-sku {
					line-height: 40rpx;
					padding: 0 24rpx;
					background: #FFF9F3;
					font-size: 24rpx;
					font-weight: 400;
					color: #FF9A33;
					// width: 450rpx;
					margin-bottom: 20rpx;
    display: inline-block;
					.order-num {
						margin-right: 10rpx;
					}
				}

				.order-price-box {
					.status-btn {
						height: 32rpx;
						border: 1rpx solid rgba(207, 169, 114, 1);
						border-radius: 15rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(168, 112, 13, 1);
						padding: 0 10rpx;
						margin-left: 20rpx;
						background: rgba(233, 183, 102, 0.16);
					}

					.order-price {
						font-size: 26rpx;

						font-weight: 600;
						color: #FF9A33;
					}
				}
			}
		}
	}
	// 售后列表卡片
	.order-list {
		background: #fff;
		margin: 20rpx 20rpx;
		border-radius: 20px;
		overflow: hidden;
		padding: 0 8rpx;
		.order-bottom {
			padding-bottom: 20rpx;
			.serve-status {
				height: 94rpx;
				background: rgba(246, 246, 246, 1);
				border-radius: 4rpx;
				margin: 0 20rpx 20rpx;
				padding: 0 20rpx;
				.serve-title {
					font-size: 26rpx;
	
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					margin-right: 30rpx;
				}
				.serve-content {
					font-size: 20rpx;
	
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
			}
			.btn-box {
				justify-content: flex-end;
			}
			.obtn {
				width: 160rpx;
				line-height: 60rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 30rpx;
				font-size: 26rpx;
	
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				margin-right: 20rpx;
				padding: 0;
			}
		}
		.order-head {
			padding: 0 25rpx;
			height: 82rpx;
			border-bottom: 1rpx solid #dfdfdf;
	
			.no {
				font-size: 24rpx;
				color: #797979;
			}
	
			.order-status {
				.iconfont {
					color: #FF9A33;
					font-size: 30rpx;
					font-weight: 600;
				}
				.status-text {
					font-size: 26rpx;
	
					font-weight: 400;
					color: #FF9A33;
					margin-left: 10rpx;
				}
			}
		}
		.order-content {
			padding: 20rpx;
			.order-sku {
				font-size: 24rpx;
	
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				// width: 450rpx;
				margin-bottom: 20rpx;
				.order-num {
					margin-right: 10rpx;
				}
			}
			.card-price-box {
				.status-btn {
					height: 32rpx;
					border: 1rpx solid rgba(207, 169, 114, 1);
					border-radius: 15rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(168, 112, 13, 1);
					padding: 0 10rpx;
					margin-left: 20rpx;
					background: rgba(233, 183, 102, 0.16);
				}
				.order-price {
					font-size: 26rpx;
	
					font-weight: 600;
					color: rgba(51, 51, 51, 1);
				}
			}
		}
		.goods-order {
			border-bottom: 1px solid rgba(223, 223, 223, 0.5);
			// padding: 20rpx 20rpx 0;
			margin-bottom: 20rpx;
		}
	
		.goods-bottom {
			background: #fff;
			padding-bottom: 30rpx;
		}
	}
	.order-content-box{
		padding-top: 30rpx;
		display: flex;
		position: relative;
		justify-content: space-between;
		image{
			width: 160rpx;
			height: 130rpx;
			border-radius: 14rpx;
			overflow: hidden;
		}
		.order-content-box-r{
			width: calc(100% - 160rpx);
			padding-left: 21rpx;
			.order-des{
				display: inline;
				color: #FF9A33;
				background: #FFF9F3;
				line-height: 40rpx;
				padding: 9rpx 25rpx;
				font-size: 24rpx;
	
			}
			.order-num{
				font-size: 24rpx;
				color: #888888;
				position: absolute;
				right: 0rpx;
				top: 89rpx;
			}
		}
		.order-content-text{
			position: relative;
			display: flex;
			align-items: center;
						margin-bottom: 30rpx;
			.order-title{
				width: 70%;
				font-size: 30rpx;
				color: #333333;
				font-weight: 500;
			}
			.order-price{
				position: absolute;
				right: 0;
				// top: 0;
				color: #FF9A33;
				font-size: 26rpx;
				font-weight: bold;
			}
		}
	}
	.order-zongjia{
		font-size: 30rpx;
		color: #333333;
		text-align: right;
		display: flex;
		justify-content: flex-end;
	}
</style>
